<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<!--  -->

		<view class="p20">
			<u-form :model="model" ref="uForm" :errorType="errorType">
				<view class="form_box bg-white">
					<view class="title">转赠金额</view>

					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" class="" label-width="130"
						label="转赠类型" prop="to_user">
						<u-input @click="show=true" placeholder="转赠类型" v-model="typeNmae" type="select"></u-input>
					</u-form-item>
					<u-form-item prop="money" label-width="50" label="￥" :label-style="{'padding-top':'10rpx'}"
						class="money_input">
						<u-input v-model="model.money" @blur="changeMoney" @confirm="changeMoney"
							:custom-style="{'font-size':'50rpx'}" placeholder-style="font-size:30rpx;" type="number"
							placeholder="请输入需要转赠的金额" />
					</u-form-item>
					<view class="balance_money fs32">
						帐户积分：<text>{{type=='balance'?account.balance_money:account.integral_money}}</text>
						<view class="all_btn" @click="changeMoney(true);">全部转赠</view>
					</view>

					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" class="" label-width="130"
						label="收款用户" prop="to_user">
						<u-input @blur="getToUserInfo" placeholder="收款用户ID" v-model="toUserInfo.user_id" type="text">
						</u-input>
					</u-form-item>
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" class="" label-width="130"
						label="备注" prop="remarks">
						<u-input placeholder="请填写转赠备注" v-model="model.remarks" type="text"></u-input>
					</u-form-item>
					
					<u-form-item :label-position="labelPosition" label="安全密码" prop="anquanPassword" label-width="150">
						<u-input :password-icon="true" :border="border" type="password" v-model="model.anquanPassword" placeholder="请输入安全密码"></u-input>
					</u-form-item>

					<view class="fs32" v-if="toUserInfo != ''">
						<view class="mt30"><text>收款人：</text>{{toUserInfo.nick_name}} ID：{{toUserInfo.user_id}}</view>
						<view class="mt30"><text>收款人手机：</text>{{toUserInfo.mobile}}</view>
						<text class="block fs32 mt30 red">* 请核实收款人信息，提交后将不可改变</text>
					</view>

				</view>
				<button size="default" shape="circle" type="primary" :loading="isLoading" class="mt40 primarybtn fs32"
					@click="post">立即转赠</button>
			</u-form>
		</view>
		<u-select  @confirm="confirm" v-model="show" :list="list"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false,
				anquanPassword: '', 
				pwrules: {
					anquanPassword: [{
							required: true,
							message: '请输安全密码',
							trigger: ['change', 'blur'],
						}
					],
				 
				 
				},
				list: [{
						value: 'balance',
						label: '账户积分'
					},
					{
						value: 'integral',
						label: '购物分'
					}
				],
				labelPosition: 'left',
				border: false,
				isLoading: false,
				model: {
					money: '',
					maxMoney: 0,
					remarks: '',
					to_user: '',
					anquanPassword:'',
					type:''
				},
				type: 'balance',
				typeNmae: '账户积分',
				account: {},
				errorType: ['toast'],
				toUserInfo: []
			}
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type
			}
		},
		onShow() {
			this.$u.post('member/api.wallet/getWalletInfo', {
				type: this.type
			}).then(res => {
				this.account = res.data.account;
			});
		},
		onReady() {},
		methods: {
			
			confirm(res){
				this.type =res[0].value
				this.typeNmae =res[0].label
			},
			changeMoney(maxMoney) { //提现金额变化
				this.model.maxMoney = 0;
				if (maxMoney === true) {
					this.model.money = this.type=='balance'?this.account.balance_money:this.account.integral_money;
					this.model.maxMoney = 1;	
				} else if (this.model.money <= 0) {
					return false;
				}

			},
			getToUserInfo: function(e) {
				if (e <= 0) {
					this.toUserInfo = [];
					this.model.to_user = 0;
					return false;
				};
				this.$u.post('member/api.Transfer/getToUserInfo', {
					user_id: e,
				}).then(res => {
					if (res.code == 1) {
						this.toUserInfo = res.data.toUserInfo
						this.model.to_user = this.toUserInfo.user_id;
					}
				});
			},
			changeRemarks() {
				this.model.remarks = '';
			},
			post() {
				let _this = this
				if (_this.model.money < 1) {
					_this.app.showToast('转赠金额不能小于1');
					return false;
				}
				if (_this.model.to_user == '') {
					_this.app.showToast('请输入收款用户.');
					return false;
				}
				if (_this.model.remarks == '') {
					_this.app.showToast('请输入转赠备注.');
					return false;
				}
				uni.showModal({
					title: '提示',
					content: '确认转赠？',
					showCancel: true,
					confirmText: '确认',
					cancelText: '取消',
					success: function(res) {
						if (res.confirm) {
							_this.isLoading = true;
							_this.model.type =_this.type
							_this.$u.post('member/api.Transfer/post', _this.model).then(res => {
								_this.isLoading = false;
								_this.app.showModal(res.msg, -1);
							}).catch(res => {
								_this.isLoading = false;
							});
						}
					}
				});

			}
		}
	}
</script>
<style lang="scss">
	.top_title {
		position: relative;
		background-color: #FFFFFF;
		padding: 0rpx 20rpx;
		display: flex;
		align-items: center;
		height: 100rpx;
		width: 100%;

		.payment_info {
			display: flex;
			align-items: center;

			.u-image {
				display: inline-block;
				margin-right: 10rpx;
			}

			text {
				color: $font-color-light;
			}
		}

		.sel_account {
			position: absolute;
			right: 20rpx;
			color: #ff5428;
		}
	}

	.form_box {
		padding: 80rpx 40rpx;

		.title {
			font-size: 35rpx;
		}

		.money_input {
			border-radius: 10rpx;
			display: flex;
			background-color: $border-color-light;
			margin-top: 40rpx;
			padding: 20rpx;
			font-size: 38rpx;
		}

		.balance_money {
			color: #ff5428;
			margin-top: 20rpx;

			text {
				color: #ff5428;
			}

			.all_btn {
				color: #ff5428;
				float: right;
			}
		}

		.withdraw_fee {
			color: #ff5428;
			margin-top: 20rpx;

			text {
				color: $font-color-red;
			}
		}

		.withdraw_tip {
			color: $font-color-red;
			margin-top: 20rpx;
		}
	}

	.mask-box {
		top: 200rpx;
	}

	.payment_list_box {
		padding: 0rpx 20rpx;
		position: absolute;
		top: 100rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid $border-color-light;
		width: 100%;
		z-index: 99;

		.payment_error {
			text-align: center;
			padding: 50rpx 0rpx;
		}

		.radio_box {
			display: block;
			padding: 40rpx 30rpx;
			border-bottom: 1rpx solid $border-color-light;

			.info {
				align-items: center;
				display: flex;

				.u-image {
					display: inline-block;
					margin-right: 10rpx;
				}
			}

			.radio {
				float: right;
			}
		}

		.payment_manage {
			margin-top: 30rpx;
			color: #ff5428;

			.u-icon {
				border: 1rpx solid #ff5428;
				border-radius: 50%;
				font-size: 20rpx;
				padding: 2rpx;
				margin-right: 5rpx;
				line-height: 50rpx;
			}
		}
	}

	.ssdsfs {
		background-color: #ff5428 !important;
	}
</style>
